<template>
  <div class="sidebar">
    <div class="collapse-btn" @click="collapseChage">
      <i :class="
          this.collapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left' 
        ">{{ collapseName }}</i>
    </div>
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#31363e" text-color="rgba(255,255,255,.7)" active-text-color="#ba740e" unique-opened router>
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index + ''" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs" :index="subItem.index + ''" :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index + ''">{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.index + ''" :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index + ''" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
import bus from "../common/bus";
import { getSysmenu } from "../../api/api";
export default {
  mixins: [mixin],
  data() {
    return {
      collapseName: "收缩",
      collapse: false,
      age: 11,
      menuItems: [],
      items: [
        {
          icon: "el-icon-lx-home",
          index: "dashboard",
          title: "综合首页",
        },
        {
          icon: "el-icon-star-off",
          index: "policeManage",
          title: "民警管理",
        },
        {
          icon: "el-icon-lx-shop",
          index: "companyManage",
          title: "劳务公司管理",
        },
        {
          icon: "el-icon-office-building",
          index: "businessManage",
          title: "企业管理",
        },
        {
          icon: "el-icon-lx-service",
          index: "representativeManage",
          title: "驻厂代表管理",
        },
        {
          icon: "el-icon-notebook-1",
          index: "logmanagement",
          title: "日志管理",
        },
        {
          icon: "el-icon-lx-global",
          index: "cloudInspection",
          title: "云端巡查管理",
        },
        {
          icon: "el-icon-lx-group",
          index: "1",
          title: "劳务工管理",
          subs: [
            {
              index: "allPerson",
              title: "全部人员",
            },
            {
              index: "nointerview",
              title: "未面试",
            },
            {
              index: "pendingpeople",
              title: "待定人员",
            },
            {
              index: "pendinginterview",
              title: "待面试",
            },
            {
              index: "laborer",
              title: "待入职",
            },
            {
              index: "onjob",
              title: "在职人员",
            },
            {
              index: "jobwhitelist",
              title: "在职白名单",
            },
            {
              index: "checkOut",
              title: "离宿人员",
            },
            {
              index: "resign",
              title: "离职人员",
            },
            {
              index: "offendpeople",
              title: "违纪人员",
            },
            // {
            //   index: "backcheck",
            //   title: "风险评估"
            // },
            {
              index: "speed",
              title: "备案登记",
            },
            {
              index: "bankcard",
              title: "银行办卡",
            },
          ],
        },
        {
          icon: "el-icon-user",
          index: "3",
          title: "外协人员管理",
          subs: [
            {
              index: "allSourcing",
              title: "外协人员",
            },
            {
              index: "outsourcing",
              title: "外协人员备案登记",
            },
          ],
        },
        // {
        //   icon: "el-icon-office-building",
        //   index: "bussinessConsult",
        //   title: "企业维权微服务"
        // },
        // {
        //   icon: "el-icon-office-building",
        //   index: "laborconsulting",
        //   title: "劳动维权微服务"
        // },

        {
          icon: "el-icon-school",
          index: "10",
          title: "安全教育",
          subs: [
            {
              index: "classification",
              title: "分类",
            },
            {
              index: "questionBank",
              title: "题库",
            },
            {
              index: "testpaper",
              title: "试卷",
            },
            {
              index: "educationStatistics",
              title: "统计",
            },
          ],
        },
        {
          icon: "el-icon-lx-mail",
          index: "11",
          title: "资讯管理",
          subs: [
            {
              index: "infomation",
              title: "消息管理",
            },
            {
              index: "column",
              title: "栏目管理",
            },
          ],
        },
        {
          icon: "el-icon-document-copy",
          index: "12",
          title: "人才招聘",
          subs: [
            {
              index: "meeting",
              title: "招聘会",
            },
            {
              index: "postdetails",
              title: "岗位信息",
            },
            {
              index: "talentResume",
              title: "人才简历",
            },
            // {
            //   index: "companyProfile",
            //   title: "企业介绍",
            // },
            // {
            //   index: "meetingList",
            //   title: "招聘会列表",
            // },
          ],
        },
        {
          icon: "el-icon-lx-settings",
          index: "2",
          title: "系统管理",
          subs: [
            {
              index: "usermanager",
              title: "用户管理",
            },
            {
              index: "miniuser",
              title: "小程序管理",
            },
            {
              index: "rolemanager",
              title: "角色管理",
            },
            {
              index: "uploadAttachment",
              title: "附件管理",
            },
          ],
        },
        // {
        //   icon: "el-icon-s-help",
        //   index: "13",
        //   title: "研判统计",
        //   subs: [
        //     {
        //       index: "patrolStatistics",
        //       title: "云端巡查统计",
        //     },
        //     {
        //       index: "peopleStatistics",
        //       title: "人员统计",
        //     },
        //     {
        //       index: "enterpriseStatistics",
        //       title: "企业统计",
        //     },
        //   ],
        // },
        // {
        //   icon: "el-icon-lx-global",
        //   index: "4",
        //   title: "云端巡查管理",
        //   subs: [
        //     {
        //       index: "taskList",
        //       title: "任务列表",
        //     },
        //     {
        //       index: "taskCensus",
        //       title: "任务统计",
        //     },
        //   ],
        // },
        // {
        //   icon: "el-icon-lx-message",
        //   index: "consultationManage",
        //   title: "咨询管理"
        // },
        //  {
        //   icon: "el-icon-lx-mail",
        //   index: "infoManage",
        //   title: "信息管理"
        // },
        // {
        //   icon: "el-icon-lx-cascades",
        //   index: "table",
        //   title: "基础表格",
        // },
        // {
        //   icon: "el-icon-lx-copy",
        //   index: "tabs",
        //   title: "tab选项卡",
        // },
        // {
        //   icon: "el-icon-lx-calendar",
        //   index: "3",
        //   title: "表单相关",
        //   subs: [
        //     {
        //       index: "form",
        //       title: "基本表单",
        //     },
        //     {
        //       index: "3-2",
        //       title: "三级菜单",
        //       subs: [
        //         {
        //           index: "editor",
        //           title: "富文本编辑器",
        //         },
        //         {
        //           index: "markdown",
        //           title: "markdown编辑器",
        //         },
        //       ],
        //     },
        //     {
        //       index: "upload",
        //       title: "文件上传",
        //     },
        //   ],
        // },
        // {
        //   icon: "el-icon-lx-emoji",
        //   index: "icon",
        //   title: "自定义图标",
        // },
        // {
        //   icon: "el-icon-lx-favor",
        //   index: "charts",
        //   title: "schart图表",
        // },
        // {
        //   icon: "el-icon-rank",
        //   index: "6",
        //   title: "拖拽组件",
        //   subs: [
        //     {
        //       index: "drag",
        //       title: "拖拽列表",
        //     },
        //     {
        //       index: "dialog",
        //       title: "拖拽弹框",
        //     },
        //   ],
        // },
        // {
        //   icon: "el-icon-lx-warn",
        //   index: "7",
        //   title: "错误处理",
        //   subs: [
        //     {
        //       index: "permission",
        //       title: "权限测试",
        //     },
        //     {
        //       index: "404",
        //       title: "404页面",
        //     },
        //     {
        //       index: "test",
        //       title: "测试页面",
        //     },
        //   ],
        // },
      ],
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
  },
  watch: {
    collapse(value) {
      this.collapseName = value ? "展开" : "收缩";
    },
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
    //权限控制
    this.initAuthority();
    // this.getMenuData("系统管理");
    this.tocenter();
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  },
  methods: {
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
      bus.$emit("chartResize");
      
      if (this.leftopen == "缩放") {
        this.leftopen = "展开";

      } else if (this.leftopen == "展开") {
        this.leftopen = "缩放";
      }
      bus.on
      console.log(this.leftopen);
    },
    tocenter() {
      this.$bus.$emit("tocenter", { age: this.age });
    },
    initAuthority() {
      let token = localStorage.getItem("token");
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/index/reloadMenu`,
        headers: {
          Authorization: token,
        },
      })
        .then((res) => {
          if (res.data.code == "20000") {
            let menuList = [];
            let dataList = [];
            if (res.data.data && res.data.data.length) {
              res.data.data.forEach((item) => {
                menuList.push({
                  title: item.menuName,
                });
              });
              // 获取后台返回的菜单栏
              this.items.forEach((item) => {
                menuList.forEach((item1) => {
                  if (item.title == item1.title) {
                    dataList.push(item);
                  }
                });
              });
              // 劳务工管理
              dataList.forEach((item1, index1) => {
                res.data.data.forEach((item2, index2) => {
                  if (item1.title == item2.menuName) {
                    if (item1.subs && item1.subs.length) {
                      for (var i = item1.subs.length - 1; i >= 0; i--) {
                        if (item2.childList && item2.childList.length) {
                          if (
                            !item2.childList
                              .map((value) => value["menuName"])
                              .includes(item1.subs[i].title)
                          ) {
                            item1.subs.splice(i, 1);
                          }
                        }
                      }
                    }
                  }
                });
              });
              // console.log("-==========", dataList);
              this.items = dataList;
              this.hideLoading();
            }
          } else if (res.data.code == "30002" || res.data.code == "50000") {
            this.$router.push("/login");
          } else {
            this.hideLoading();
            this.$message.error("获取菜单接口失败");
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message.error("获取菜单接口失败");
          this.$router.push("/login");
        });
    },
    // getMenuData(menuName) {
    //   let menuData = [];
    //   getSysmenu().then(
    //     function(data) {
    //       let data1 = data.data.menuArr;
    //       data1.forEach((val,index) => {
    //         let i=8;
    //         if(val.menuname==menuName){
    //           let systemItem = {};
    //           systemItem.icon = "el-icon-setting";
    //           systemItem.idex=i;
    //           systemItem.title=val.menuname;
    //           systemItem.subs=[];
    //           data1.forEach(value => {
    //             if(value.parentid==val.id){
    //               let systemSubs = {};
    //               let menuurl = value.menuurl.split('/')[2];
    //               systemSubs.index = menuurl;
    //               systemSubs.title = value.menuname;
    //               systemItem.subs.push(systemSubs);
    //             }
    //           });
    //           this.items.push(systemItem);
    //         }
    //         i++;
    //       });
    //     }.bind(this)
    //   );
    // }
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar {
  width: 0px;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
.collapse-btn {
  padding: 0 10px;
  cursor: pointer;
  line-height: 30px;
  background: #24262e;
  color: #afafb2;
  font-size: 14px;
}
.collapse-btn:hover {
  background-color: #ff9f18 !important;
  color: white;
}
</style>
